<template>
    <div class="tr">
        <div class="tr-top">
            <div class="left">
                <div class="itm"><el-button type="primary" plain @click="saveEv()">保存</el-button>
                </div>
                <div class="itm"><el-button @click="addTfEv" type="primary" plain>增加从表</el-button></div>
            </div>
            <div class="right">
                <!-- <div class="itm"> <el-input clearable v-model="tableObjData.label__like" style="width: 240px"
                        placeholder="输入名称" /></div>
                <div class="itm"><el-button @click="getEv(true)">查询</el-button></div> -->
            </div>
        </div>
        <div class="tr-content">
            <el-scrollbar>
                <div class="info">
                    <div class="title"><el-tag type="primary">详细信息</el-tag></div>
                    <el-row align="middle">
                        <el-col style="text-align: right; padding-right: 5px;box-sizing: border-box;" :xs="3" :sm="3"
                            :md="2" :lg="2" :xl="2" class="mb20">
                            名称
                        </el-col>
                        <el-col :xs="6" :sm="6" :md="6" :lg="6" :xl="6" class="mb20">
                            <el-input v-model="editData.name" style="width: 100%;height: 100%;" :rows="4"
                                placeholder="请输入名称" />
                        </el-col>
                    </el-row>
                    <el-row style="padding-top: 5px;box-sizing: border-box;" align="middle">
                        <el-col style="text-align: right; padding-right: 5px;box-sizing: border-box;" :xs="3" :sm="3"
                            :md="2" :lg="2" :xl="2" class="mb20">
                            备注
                        </el-col>
                        <el-col :xs="6" :sm="6" :md="6" :lg="6" :xl="6" class="mb20">
                            <el-input v-model="editData.rem" style="width: 100%;height: 100%;" :rows="4"
                                placeholder="请输入名称" />
                        </el-col>

                    </el-row>
                </div>
                <div class="mf">
                    <div class="title"><el-tag type="primary">主表</el-tag></div>
                    <div class="select tr-layout">
                        <div class="type"><el-tag class="type-cursor" type="success"
                                @click="editData.mf.select.isshow = !editData.mf.select.isshow">查询操作{{
                    editData.mf.select.isshow == true ? '隐藏' : '展开' }}</el-tag>

                            <div class="config">
                                <el-input size="small" style="background-color: white;" disabled
                                    v-model="editData.mf.select.config_name" placeholder="请选择数据库配置"
                                    class="input-with-select">
                                    <template #append>
                                        <el-button size="small" @click="serachPoolEv(table = 'mf', type = 'select')"
                                            :icon="Search" />
                                    </template>
                                </el-input>
                            </div>
                        </div>
                        <el-row v-if="editData.mf.select.isshow == true">
                            <el-col :xs="18" :sm="18" :md="18" :lg="18" :xl="18" class="mb20">
                                <div class="sql">
                                    <div class="laber">数据源</div>
                                    <div class="content">
                                        <el-input v-model="editData.mf.select.sql" style="width: 100%;height: 100%;"
                                            :rows="4" type="textarea" placeholder="请输入数据源" />
                                    </div>
                                </div>
                            </el-col>
                        </el-row>
                    </div>
                    <div class="select tr-layout">
                        <div class="type"><el-tag class="type-cursor" type="success"
                                @click="editData.mf.exist.isshow = !editData.mf.exist.isshow">存在校验{{
                    editData.mf.exist.isshow == true ? '隐藏' : '展开' }}</el-tag>

                            <div class="config">
                                <el-input size="small" style="background-color: white;" disabled
                                    v-model="editData.mf.exist.config_name" placeholder="请选择数据库配置"
                                    class="input-with-select">
                                    <template #append>
                                        <el-button size="small" @click="serachPoolEv(table = 'mf', type = 'exist')"
                                            :icon="Search" />
                                    </template>
                                </el-input>
                            </div>
                        </div>
                        <el-row v-if="editData.mf.exist.isshow == true">
                            <el-col :xs="18" :sm="18" :md="18" :lg="18" :xl="18" class="mb20">
                                <div class="sql">
                                    <div class="laber">数据源</div>
                                    <div class="content">
                                        <el-input v-model="editData.mf.exist.sql" style="width: 100%;height: 100%;"
                                            :rows="4" type="textarea" placeholder="请输入数据源" />
                                    </div>
                                </div>
                            </el-col>
                        </el-row>
                    </div>
                    <div class="insert tr-layout">
                        <div class="type"><el-tag class="type-cursor"
                                @click="editData.mf.insert.isshow = !editData.mf.insert.isshow" type="success">新增操作{{
                    editData.mf.insert.isshow == true ? '隐藏' : '展开' }}</el-tag>
                            <div class="config">
                                <el-input size="small" style="background-color: white;" disabled
                                    v-model="editData.mf.insert.config_name" placeholder="请选择数据库配置"
                                    class="input-with-select">
                                    <template #append>
                                        <el-button size="small" @click="serachPoolEv(table = 'mf', type = 'insert')"
                                            :icon="Search" />
                                    </template>
                                </el-input>
                            </div>
                        </div>
                        <el-row v-if="editData.mf.insert.isshow == true">
                            <el-col :xs="18" :sm="18" :md="18" :lg="18" :xl="18" class="mb20">
                                <div class="sql">
                                    <div class="laber">数据源</div>
                                    <div class="content">
                                        <el-input v-model="editData.mf.insert.sql" style="width: 100%;height: 100%;"
                                            :rows="4" type="textarea" placeholder="请输入数据源" />
                                    </div>
                                </div>
                            </el-col>
                        </el-row>
                    </div>
                    <div class="update tr-layout">
                        <div class="type"><el-tag class="type-cursor"
                                @click="editData.mf.update.isshow = !editData.mf.update.isshow" type="success">修改操作{{
                    editData.mf.update.isshow == true ? '隐藏' : '展开' }}</el-tag>

                            <div class="config">
                                <el-input size="small" style="background-color: white;" disabled
                                    v-model="editData.mf.update.config_name" placeholder="请选择数据库配置"
                                    class="input-with-select">
                                    <template #append>
                                        <el-button size="small" @click="serachPoolEv(table = 'mf', type = 'update')"
                                            :icon="Search" />
                                    </template>
                                </el-input>
                            </div>
                        </div>
                        <el-row v-if="editData.mf.update.isshow == true">
                            <el-col :xs="18" :sm="18" :md="18" :lg="18" :xl="18" class="mb20">
                                <div class="sql">
                                    <div class="laber">数据源</div>
                                    <div class="content">
                                        <el-input v-model="editData.mf.update.sql" style="width: 100%;height: 100%;"
                                            :rows="4" type="textarea" placeholder="请输入数据源" />
                                    </div>
                                </div>
                            </el-col>
                        </el-row>
                    </div>
                    <div class="delete tr-layout">
                        <div class="type"><el-tag class="type-cursor"
                                @click="editData.mf.delete.isshow = !editData.mf.delete.isshow" type="success">删除操作{{
                    editData.mf.delete.isshow == true ? '隐藏' : '展开' }}</el-tag>
                            <div class="config">
                                <el-input size="small" style="background-color: white;" disabled
                                    v-model="editData.mf.delete.config_name" placeholder="请选择数据库配置"
                                    class="input-with-select">
                                    <template #append>
                                        <el-button size="small" @click="serachPoolEv(table = 'mf', type = 'delete')"
                                            :icon="Search" />
                                    </template>
                                </el-input>
                            </div>
                        </div>
                        <el-row v-if="editData.mf.delete.isshow == true">
                            <el-col :xs="18" :sm="18" :md="18" :lg="18" :xl="18" class="mb20">
                                <div class="sql">
                                    <div class="laber">数据源</div>
                                    <div class="content">
                                        <el-input v-model="editData.mf.delete.sql" style="width: 100%;height: 100%;"
                                            :rows="4" type="textarea" placeholder="请输入数据源" />
                                    </div>
                                </div>
                            </el-col>
                        </el-row>
                    </div>
                </div>

                <div class="tf" v-for="(itm, index) in editData.tf" :key="index">
                    <div class="title"><el-tag type="primary">从表{{ index + 1 }}</el-tag>
                        <el-button type="danger" @click="popConfirmEv(index)" :icon="Delete" link size="small" circle />
                    </div>
                    <div class="select tr-layout">
                        <div class="type"><el-tag class="type-cursor" type="success"
                                @click="itm.select.isshow = !itm.select.isshow">查询操作{{
                    itm.select.isshow == true ? '隐藏' : '展开' }}</el-tag>
                            <div class="config">
                                <el-input size="small" style="background-color: white;" disabled
                                    v-model="itm.select.config_name" placeholder="请选择数据库配置" class="input-with-select">
                                    <template #append>
                                        <el-button size="small"
                                            @click="serachPoolEv(table = 'tf', type = 'select', i = index)"
                                            :icon="Search" />
                                    </template>
                                </el-input>
                            </div>
                        </div>
                        <el-row v-if="itm.select.isshow == true">
                            <el-col :xs="18" :sm="18" :md="18" :lg="18" :xl="18" class="mb20">
                                <div class="sql">
                                    <div class="laber">数据源</div>
                                    <div class="content">
                                        <el-input v-model="itm.select.sql" style="width: 100%;height: 100%;" :rows="4"
                                            type="textarea" placeholder="请输入数据源" />
                                    </div>
                                </div>
                            </el-col>
                        </el-row>
                    </div>

                    <div class="select tr-layout">
                        <div class="type"><el-tag class="type-cursor" type="success"
                                @click="itm.exist.isshow = !itm.exist.isshow">存在判断{{
                    itm.exist.isshow == true ? '隐藏' : '展开' }}</el-tag>
                            <div class="config">
                                <el-input size="small" style="background-color: white;" disabled
                                    v-model="itm.exist.config_name" placeholder="请选择数据库配置" class="input-with-select">
                                    <template #append>
                                        <el-button size="small"
                                            @click="serachPoolEv(table = 'tf', type = 'exist', i = index)"
                                            :icon="Search" />
                                    </template>
                                </el-input>
                            </div>
                        </div>
                        <el-row v-if="itm.exist.isshow == true">
                            <el-col :xs="18" :sm="18" :md="18" :lg="18" :xl="18" class="mb20">
                                <div class="sql">
                                    <div class="laber">数据源</div>
                                    <div class="content">
                                        <el-input v-model="itm.exist.sql" style="width: 100%;height: 100%;" :rows="4"
                                            type="textarea" placeholder="请输入数据源" />
                                    </div>
                                </div>
                            </el-col>
                        </el-row>
                    </div>

                    <div class="insert tr-layout">
                        <div class="type"><el-tag class="type-cursor" @click="itm.insert.isshow = !itm.insert.isshow"
                                type="success">新增操作{{
                    itm.insert.isshow == true ? '隐藏' : '展开' }}</el-tag>
                            <div class="config">
                                <el-input size="small" style="background-color: white;" disabled
                                    v-model="itm.insert.config_name" placeholder="请选择数据库配置" class="input-with-select">
                                    <template #append>
                                        <el-button size="small"
                                            @click="serachPoolEv(table = 'tf', type = 'insert', i = index)"
                                            :icon="Search" />
                                    </template>
                                </el-input>
                            </div>
                        </div>
                        <el-row v-if="itm.insert.isshow == true">
                            <el-col :xs="18" :sm="18" :md="18" :lg="18" :xl="18" class="mb20">
                                <div class="sql">
                                    <div class="laber">数据源</div>
                                    <div class="content">
                                        <el-input v-model="itm.insert.sql" style="width: 100%;height: 100%;" :rows="4"
                                            type="textarea" placeholder="请输入数据源" />
                                    </div>
                                </div>
                            </el-col>
                        </el-row>
                    </div>
                    <div class="update tr-layout">
                        <div class="type"><el-tag class="type-cursor" @click="itm.update.isshow = !itm.update.isshow"
                                type="success">修改操作{{
                    itm.update.isshow == true ? '隐藏' : '展开' }}</el-tag>

                            <div class="config">
                                <el-input size="small" style="background-color: white;" disabled
                                    v-model="itm.update.config_name" placeholder="请选择数据库配置" class="input-with-select">
                                    <template #append>
                                        <el-button size="small"
                                            @click="serachPoolEv(table = 'tf', type = 'update', i = index)"
                                            :icon="Search" />
                                    </template>
                                </el-input>
                            </div>
                        </div>
                        <el-row v-if="itm.update.isshow == true">
                            <el-col :xs="18" :sm="18" :md="18" :lg="18" :xl="18" class="mb20">
                                <div class="sql">
                                    <div class="laber">数据源</div>
                                    <div class="content">
                                        <el-input v-model="itm.update.sql" style="width: 100%;height: 100%;" :rows="4"
                                            type="textarea" placeholder="请输入数据源" />
                                    </div>
                                </div>
                            </el-col>
                        </el-row>
                    </div>
                    <div class="delete tr-layout">
                        <div class="type"><el-tag class="type-cursor" @click="itm.delete.isshow = !itm.delete.isshow"
                                type="success">删除操作{{
                    itm.delete.isshow == true ? '隐藏' : '展开' }}</el-tag>
                            <div class="config">
                                <el-input size="small" style="background-color: white;" disabled
                                    v-model="itm.delete.config_name" placeholder="请选择数据库配置" class="input-with-select">
                                    <template #append>
                                        <el-button size="small"
                                            @click="serachPoolEv(table = 'tf', type = 'delete', i = index)"
                                            :icon="Search" />
                                    </template>
                                </el-input>
                            </div>
                        </div>
                        <el-row v-if="itm.delete.isshow == true">
                            <el-col :xs="18" :sm="18" :md="18" :lg="18" :xl="18" class="mb20">
                                <div class="sql">
                                    <div class="laber">数据源</div>
                                    <div class="content">
                                        <el-input v-model="itm.delete.sql" style="width: 100%;height: 100%;" :rows="4"
                                            type="textarea" placeholder="请输入数据源" />
                                    </div>
                                </div>
                            </el-col>
                        </el-row>
                    </div>
                </div>
            </el-scrollbar>
        </div>
        <el-dialog v-model="dialogVisible" title="Tips" width="50%" :before-close="handleClose">
            <div style="height: 300px">
                <componentsDictList @dbRowBasicList="dbRowBasicList" :basicList="ysfsList" />
            </div>
        </el-dialog>
    </div>
</template>

<script setup>
import { tabsIsDelete } from '@/utils/tabs.js'
import { useRouter } from 'vue-router'
import { ref, reactive, onMounted, onActivated } from 'vue'
import componentsDictList from '@/views/setting/basic/dbpool/components/index.vue'
import { TimerTaskListPost,TimerTaskPkGet,TimerTaskPkPut } from '@/api/setting/timerTask/index.js'
import { loadingStore,loginInfoStore,tabsBarStore } from '@/stores/index.js'

const loading = loadingStore()
import {
    Search, Delete
} from '@element-plus/icons-vue'

const ysfsList = reactive({
    label: "查看连接池资料",
    search: {
        label: "名称搜索",  //名称
        value: "value__like", //表的字段
    },
    dictData: [{
        label: "池名称",  //名称
        value: "value", //表的字段
        disabled: true, //是否可编辑
        width: "100", //表的字段
    },
    {
        label: "登录账号",  //名称
        value: "label", //表的字段
        width: "200", //表的字段
    },
    {
        label: "登录密码",  //名称
        value: "str01", //表的字段
        width: "100", //表的字段
    },
    {
        label: "连接地址",  //名称
        value: "str02", //表的字段
        width: "200", //表的字段
    },
    {
        label: "数据库类型",  //名称
        value: "str03", //表的字段
        width: "200", //表的字段
        default: "MSSQL", //表的字段
    }, {
        label: "数据库名称",  //名称
        value: "str04", //表的字段
        width: "200", //表的字段
    },
    {
        label: "端口号",  //名称
        value: "str05", //表的字段
        width: "200", //表的字段
    },{
        label: "数据驱动",  //名称
        value: "str06", //表的字段
        default: "ODBC Driver 17 for SQL Server", //表的字段

    }
    ],
    basic_value: 'pool'
})
const dialogVisible = ref(false)
const isAdd = ref(true)
const loginInfoStoreData = loginInfoStore()
// 顶部菜单数据
const breadcrumbDataList = tabsBarStore()
const editData = reactive({
    id: "",
    name: "",
    rem: "",
    mf: {
        id: "",
        select: {
            isshow: false,
            sql: "",
            config: "",
            config_name: ""
        },
        insert: {
            isshow: false,
            sql: "",
            config: "",
            config_name: ""
        },
        update: {
            isshow: false,
            sql: "",
            config: "",
            config_name: ""
        },
        delete: {
            isshow: false,
            sql: "",
            config: "",
            config_name: ""
        },
        exist: {
            isshow: false,
            sql: "",
            config: "",
            config_name: ""
        }
    },
    tf: [
        {
            id: "",
            select: {
                isshow: false,
                sql: "",
                config: "",
                config_name: ""
            },
            insert: {
                isshow: false,
                sql: "",
                config: "",
                config_name: ""
            },
            update: {
                isshow: false,
                sql: "",
                config: "",
                config_name: ""
            },
            delete: {
                isshow: false,
                sql: "",
                config: "",
                config_name: ""
            },
            exist: {
                isshow: false,
                sql: "",
                config: "",
                config_name: ""
            }
        }
    ]
})
const selectPool = reactive({})
const route = useRouter()
onMounted(() => {

});
onActivated(() => {

})
// 保存按钮
const saveEv = async () => {
    console.log('点击保存')
    if (isAdd.value == true) {
        await addEv()
    } else {
        await editEv()
    }
}
const handleClose = (done) => {
    done()
}
// 点击选择连接池
const serachPoolEv = (table, type, i) => {
    // table表示主表还是从表，type操作类型，i哪一项
    selectPool.table = table
    selectPool.type = type
    selectPool.i = i
    dialogVisible.value = true
}
// 删除从表
const popConfirmEv = async (index) => {
    const message = await ElMessageBox.confirm('确定移除吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning ',
        confirmButtonClass: 'confirm-suer',
        cancelButtonClass: 'confirm-cancel',
        roundButton: true,
    }).catch((err) => err)
    if (message == 'confirm') {
        editData.tf.splice(index, 1)
    }

}
// 增加从表
const addTfEv = () => {
    let addData = {
        id: "",
        select: {
            isshow: false,
            sql: "",
            config: "",
            config_name: ""
        },
        insert: {
            isshow: false,
            sql: "",
            config: "",
            config_name: ""
        },
        update: {
            isshow: false,
            sql: "",
            config: "",
            config_name: ""
        },
        delete: {
            isshow: false,
            sql: "",
            config: "",
            config_name: ""
        },
        exist: {
            isshow: false,
            sql: "",
            config: "",
            config_name: ""
        }
    }
    editData.tf.splice(editData.tf.length, 0, addData)
}
// 子组件发送获取到的连接池
const dbRowBasicList = (val) => {
    if (selectPool.table == 'mf') {
        editData[selectPool.table][selectPool.type].config = val.id
        editData[selectPool.table][selectPool.type].config_name = val.value
    } else {
        console.log(selectPool)
        console.log(88888)
        editData[selectPool.table][selectPool.i][selectPool.type].config = val.id
        editData[selectPool.table][selectPool.i][selectPool.type].config_name = val.value
    }
    dialogVisible.value = false
}
// 保存数据
const addEv = async () => {
    loading.loading = true
    try {

        let arr_data = await TimerTaskListPost(editData)
        if (arr_data.status != 200) {
            return
        }
        ElMessage.success('新增成功')
        isAdd.value = true
        await tabsItmCloseEv()
    } catch (error) {
        ElMessage.error('新增接口请求失败' + error)
    } finally {
        loading.loading = false
    }
}

// 修改数据
const editEv = async() => {
    loading.loading = true
    try {
        let arr_data = await TimerTaskPkPut(editData,editData.id)
        if (arr_data.status != 200) {
            return
        }
        await getPkEv(editData.id)
        ElMessage.success('修改成功')
    } catch (error) {
        ElMessage.error('修改数据接口请求失败' + error)
    } finally {
        loading.loading = false
    }
}

// 查询单个数据
const getPkEv = async (rowId) => {
    loading.loading = true
    try {
        let arr_data = await TimerTaskPkGet(rowId)
        if (arr_data.status != 200) {
            return
        }
        editData.id = arr_data.data.result.id
        editData.name = arr_data.data.result.name
        editData.rem = arr_data.data.result.rem
        editData.tf = arr_data.data.result.tf
        editData.mf = arr_data.data.result.mf
    } catch (error) {
        ElMessage.error('获取单个数据接口请求失败' + error)
    } finally {
        loading.loading = false
    }
}

// 删除tabs 
const tabsItmCloseEv = () => {
    console.log('点击导航菜单删除')
    const val = {router: '/setting/timertaskadd', title: '新增推送任务'}
    // 删除菜单
    const activateTop = tabsIsDelete(val, breadcrumbDataList)
    console.log(activateTop)
    // 设置激活菜单
    loginInfoStoreData.menuActive = activateTop.router

    // 切换路由
    route.push({ path: activateTop.router })
} 

defineExpose({
    isAdd,
    getPkEv
})
</script>

<style lang='less' scoped>
@laber: 80px;

.tr {
    height: 100%;
}

.tr-top {
    height: var(--tr-top-height);
    display: flex;
    align-items: center;
    justify-content: space-between;

    .left,
    .right {
        display: flex;
        align-items: center;
    }

    .itm {
        padding-right: 4px;
        box-sizing: border-box;
    }
}

.tr-content {
    height: calc(100% - var(--tr-top-height) - var(--tr-page-height));
}

.tr-layout {
    padding: 10px;
    box-sizing: border-box;

    .type {
        padding: 5px;
        display: flex;
        align-items: center;

        .config {
            padding-left: 5px;
            box-sizing: border-box;
        }
    }

    .sql {
        display: flex;
        align-items: center;
    }

    .laber {
        width: @laber;
        text-align: right;
        padding-right: 5px;
        box-sizing: border-box;
    }

    .content {
        width: calc(100% - @laber);
    }

    .type-cursor {
        cursor: pointer;
    }
}
</style>